import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Pagination } from 'antd';

class Paginat extends React.Component{
    static propTypes = {
        pageSizeOptions: PropTypes.array,
        total: PropTypes.number,
        current: PropTypes.number,
        pageSize: PropTypes.number
      }
      static defaultProps = {
        pageSizeOptions: ['5', '10', '20'],
        total: 0,  //必传，不解释
        current: 1, //必传 ，用于查询新条件，重置，条数改变跳转到第一页（用于分页组件改变）
        pageSize: 5 //必传 ，用于查询新条件，重置，初始化每页条数（用于分页组件改变）
      }
      constructor(props) {
        super(props);
      }
    render(){
        const { pageSizeOptions, total, current, pageSize } = this.props;
        return(
            <Fragment>
                {total?
                <div className="pagination" style={{marginTop:20,float:"right"}}>
                    <Pagination 
                    pageSizeOptions = { pageSizeOptions }
                    pageSize = { pageSize }
                    showQuickJumper 
                    showSizeChanger 
                    showTotal = { this.showTotal }
                    current = {current }
                    total = { total }
                    onChange = { this.onChange }
                    onShowSizeChange = { this.onShowSizeChange }
                    style={{float:"right"}} />
                </div>:''
                }
            </Fragment>
        )
    }
    showTotal(total) {
        return `总计 ${total} 条`;
    }
    // 页码变化时将当前页和每页条数传出去
    onChange = (pageNumber, pageSize) => {
        // console.log('onChange: ', pageNumber, pageSize);
        this.props.handleChange(pageNumber, pageSize)
    }
    // 每页条数变化时将当前页和每页条数传出去
    onShowSizeChange=(current, pageSize)=> {
        // console.log("onShowSizeChange：",current, pageSize);
        this.props.handleChange(1, pageSize)
    }
}
export default Paginat